<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="common/include :: header('新增出入库详情')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-post-add">
        <input type="hidden" name="type" th:value="${type}">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">仓库：</label>
            <div class="col-sm-8">
                <select class="form-control" name="storeId" id="storeId">
                    <option value="">请选择</option>
                    <option th:each="dict : ${storeList}" th:text="${dict.storeName}" th:value="${dict.id}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-8">
                <textarea id="remark" name="remark" class="form-control"></textarea>
            </div>
        </div>
        <li>
            <a class="btn btn-primary btn-rounded btn-sm item-toolbar" onclick="billItems($('#storeId').val())"><i class="fa fa-plus"></i>&nbsp;添加明细</a>
        </li>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
        <li>
            <a class="btn btn-success btn-sm" onclick="updateAmounts()">&nbsp;立即提交</a>
            <a class="btn btn-danger  btn-sm" onclick="removeAll()"> 清空</a>
        </li>
    </form>
</div>
<th:block th:include="common/include :: footer"/>
<script type="text/javascript">

    var prefix = ctx + "/business/stockBill";

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-post-add').serialize());
        }
    }

    function billItems(storeId) {
        $.modal.open("添加商品明细", "/business/goods/listPage?type=" + [[${type}]] + "&storeId=" + storeId);
    }

    $(function () {
        var options = {
            url: "/business/stockBillItem/query",
            createUrl: prefix + "/addPage",
            removeUrl: prefix + "/remove",
                modalName: "商品结算单",
                id: "bootstrap-table",
                toolbar: "item-toolbar",
                uniqueId: "id",
                columns: [
                    {
                        field: 'id',
                        title: '序号',
                        visible: false
                    },
                    {
                        field: 'good.goodsName',
                        title: '物品',
                        sortable: true
                    },

                    {
                        field: 'price',
                        title: '价格',
                        sortable: true
                    },
                    {
                        field: 'amounts',
                        title: '数量',
                        sortable: true,
                    },
                    {
                        title: '小计',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return row.price * row.amounts
                        }
                    },
                    {
                        title: '操作',
                        sortable: true,
                        formatter: function (value, row, index) {
                            let actions = [];
                            actions.push('<a class="btn btn-info btn-xs" href="javascript:void(0)"' +
                                ' onclick="selectItem(\'' + row.id + '\')"><i class="fa fa-plus"></i></a>');
                            actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)"' +
                                ' onclick="decreaseItem(\'' + row.id + '\')"><i class="fa fa-minus"></i></a>');
                            actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)"' +
                                ' onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>移除</a>');
                            return actions.join('');
                        },
                    }
                ]
            }
        ;
        $.table.init(options);
    });

    // 保存信息 刷新表格
    function updateAmounts() {
        let stateItemTable= $('#bootstrap-table').bootstrapTable('getData',false);

        let config = {
            url: "/business/stockBillItem/updateAmounts",
            type: "post",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(stateItemTable),
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
                $.modal.disable();
            },
            success: function(result) {
                $.table.refresh("bootstrap-table");
                $.operate.successCallback(result);
            }
        };
        $.ajax(config)
    }

    function selectItem(id){
        let rs=$('#bootstrap-table').bootstrapTable('getRowByUniqueId', id);
        if (rs) {
            rs.amounts = rs.amounts + 1;
            $('#bootstrap-table').bootstrapTable('updateByUniqueId', rs)
        }
    }

    function decreaseItem(id){
        let rs=$('#bootstrap-table').bootstrapTable('getRowByUniqueId', id);
        if (rs.amounts > 1) {
            rs.amounts = rs.amounts - 1;
            $('#bootstrap-table').bootstrapTable('updateByUniqueId', rs)
        }else {
            $('#bootstrap-table').bootstrapTable('removeByUniqueId', id)
            $.operate.get("/business/stockBillItem/remove?id=" + id);
        }
    }

    // 批量删除信息
     function removeAll() {
        $.modal.confirm("确认要清空当前明细表吗?", function() {
            $.operate.get("/business/stockBillItem/removeAll?id=0");
        });
    }
</script>
</body>
</html>
